<!-- 2021 9.30 做修改 取消扣除界面 -->
<template>
	<app-layout>
		<!-- 9.30 取消扣除金币界面  取消获取和扣除切换 -->
		<app-tab-nav :tabList="tabList" :activeItem="activeTab" @click="setTab" :theme="getTheme"></app-tab-nav>
		<view v-for="(item, index) in list" :key="index" :class="[getTheme+'-m-text', getTheme, 'u-item']">
			<view class='u-desc'>{{item.desc}}</view>
			<view class='u-integral'>{{item.integral}}金币</view>
			<view class="u-info">
				<text>时间: {{item.created_at}}</text>
			</view>
		</view>
		<view v-if="list.length == 0" class="tip main-center cross-center">暂无数据</view>
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from "vuex";
	import appTabNav from "../../../components/basic-component/app-tab-nav/app-tab-nav.vue";

	export default {
		data() {
			return {
				tabList: [{
						id: 1,
						name: '获取'
					},
					{
						id: 2,
						name: '扣除'
					},
				],
				activeTab: 1,
				page: 1,
				list: [],
				page_count: 1
			}
		},
		components: {
			"app-tab-nav": appTabNav
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info
			}),
			...mapGetters('mallConfig', {
				getTheme: 'getTheme'
			})
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			if (this.page_count >= this.page) {
				this.getList();
			}
		},
		methods: {
			setTab(e) {
				this.activeTab = e.currentTarget.dataset.id;
				this.list = [];
				this.page = 1;
				this.getList();
			},
			async getList() {
				try {
					const res = await this.$request({
						url: this.$api.integral_mall.log,
						data: {
							type: this.activeTab,
							page: this.page
						}
					});
					let {
						code,
						data,
						msg
					} = res;
					if (code === 0) {
						if (this.page !== 1) {
							this.list = this.list.concat(data.list);
						} else {
							this.list = data.list;
							this.page_count = data.pagination.page_count;
						}
						this.page = data.list.length ? this.page + 1 : this.page;
					} else {
						uni.showToast({
							title: msg,
							icon: 'none',
							duration: 1000
						});
					}
				} catch (e) {
					this.$event.on(this.$const.EVENT_USER_LOGIN).then(() => {
						this.getList();
					});
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.u-item {
		font-size: 28upx;
		padding: 36upx 24upx;
		border-bottom: 1upx solid #e2e2e2;
		background-color: #ffffff;
	}

	.u-desc {
		color: #353535;
		margin-bottom: 6upx;
	}

	.u-integral {
		width: 25%;
		display: inline-block;
	}

	.u-info {
		font-size: 22upx;
		float: right;
		color: #999999;
	}

	.tip {
		width: 100%;
		color: #999999;
		height: #{500rpx};
	}
</style>
